import React from 'react';
import { Typography, Tag, Card, Image, Space, Grid } from 'antd';
import { NavLink } from 'react-router-dom';
import { baseURL } from '../../config';
const { Title, Paragraph, Text } = Typography;

const { useBreakpoint } = Grid;

export interface Room {
	id: number;
	price: number;
	housetype: string;
	area: number;
	dir: string;
	tags: string;
	name: string;
	issell: boolean;
	url: string;
}

// 分割标签 - eg. 配套齐全/精装修/拎包入住
function splitTags(tags: string) {
	return tags.split('/').slice(0, 3);
}

/**
 * 获取图片的宽度
 */
 function useImgWidth(): number {
	const screens = useBreakpoint(); // 响应式布局
	let width = 160; // 默认值
	if (screens.xs) {
        width = 100;
	}
	return width;
}

interface IProps {
	room: Room;
}
const RoomCard: React.FC<IProps> = (props) => {
	const { room } = props;
    const width = useImgWidth();
	return (
		<NavLink
			to={{
				pathname: `/room/${room.id}`,
				state: {
					room: room,
				},
			}}>
			<Card bordered hoverable>
				<Card.Meta
					avatar={
						<Image
							preview={false}
							width={width}
							src={`${baseURL}/images/${room.url}.jpg`}
							fallback=''
						/>
					}
					title={<Title level={3}>{room.name}</Title>}
					description={
						<>
							<Paragraph>
								{splitTags(room.tags).map((tag, index) => {
									return (
										<Tag key={index} color='blue'>
											{tag}
										</Tag>
									);
								})}
							</Paragraph>
							<Space size='middle'>
								<Text type='secondary'>
									{room.area}m
									<span>
										<sup>2</sup>
									</span>
								</Text>
								<Text type='secondary'>{room.housetype}</Text>
								<Text type='secondary'>{room.dir}</Text>
							</Space>
							<div
								style={{
									marginTop: '15px',
								}}>
								<Text
									type='danger'
									style={{
										fontSize: '1.2rem',
									}}>
									{room.price}
									<span>元/月</span>
								</Text>
							</div>
						</>
					}
				/>
			</Card>
		</NavLink>
	);
};
export default RoomCard;
